<template>
  <a-row type="flex" :gutter="8">
    <a-col class="left" :class="{'full': !buttons}">
      <slot name="left">
        <a-select
          mode="multiple"
          :placeholder="placeholder"
          v-model="selectIds"
          :options="selectOptions"
          :disabled="disabled"
          :open="selectOpen"
          style="width: 100%;"
          @change="changeT"
          @dropdownVisibleChange="handleDropdownVisibleChange"
          @click.native="visible=(buttons?visible:true)"
        />
      </slot>
    </a-col>
    <a-col v-if="buttons" class="right">
      <a-button
        type="primary"
        icon="search"
        :disabled="disabled"
        @click="chooseCompany2">{{ selectButtonText }}
      </a-button>
    </a-col>
    <wx-select-company-component
      ref="selectUserModal2"
      @ok="selectCompanyByOK"
      :multiple-flag="multiple"
      :selectIds="selectIds"></wx-select-company-component>
  </a-row>
</template>
<script>
import { Ellipsis, STable } from '@/components'
import WxSelectCompanyComponent from '@/components/WxSelectBizComponent/WxSelectCompanyComponent'
import { postAction } from '@/api/manage'

export default {
  name: 'WxSelectCompanyV2Component',
  components: {
    Ellipsis,
    STable,
    WxSelectCompanyComponent
  },
  props: {
    // eslint-disable-line
    value: {},
    /** 是否返回 id，默认 false，返回 code */
    placeholder: {
      type: String,
      default: '请选择'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否支持多选，默认 true
    multiple: {
      type: Boolean,
      default: true
    },
    // 是否显示按钮，默认 true
    buttons: {
      type: Boolean,
      default: true
    },
    // 显示的 Key
    displayKey: {
      type: String,
      default: null
    },
    // 返回的 key
    returnKeys: {
      type: Array,
      default: () => ['id', 'id']
    },
    // 选择按钮文字
    selectButtonText: {
      type: String,
      default: '选择'
    }
  },
  data () {
    return {
      selectValue: [],
      selectOptions: [],
      dataSourceMap: {},
      visible: false,
      selectOpen: false,
      formInfo: {},
      selectIds: [],
      url: {
        getall: '/system/company/allList'
      }
    }
  },
  created () {
  },
  mounted () {
    console.log(this.multiple)
  },
  computed: {},
  watch: {
    value: {
      immediate: true,
      handler (val) {
        console.log(val)
        if (val) {
          if (!isNaN(val)) {
            var mycars = new Array(1)
            mycars[0] = parseInt(val)
            val = mycars
          } else {
            val = val.split(',')
            val = val.map(item => {
              return +item
            })
          }
          this.selectIds = val
        } else {
          this.selectIds = []
        }
        this.selectOptions = []
        const that = this
        postAction(this.url.getall, { ids: this.selectIds.join(',') }).then(res => {
          res.result.data.map(k => {
              that.selectOptions.push({ label: k.companyName, value: k.companyId })
            }
          )
        }).finally(() => {
        })
        this.$emit('change', this.selectIds.join(','))
      }
    },
    selectValue: {
      deep: true,
      handler (val) {
        // debugger
        // const rows = val.map(key => this.dataSourceMap[key])
        // this.$emit('select', rows)
        // const data = val.join(',')
        // this.$emit('input', data)
        // this.$emit('change', data)
      }
    }
  },
  methods: {
    handleDropdownVisibleChange () {
      // 解决antdv自己的bug —— open 设置为 false 了，点击后还是添加了 open 样式，导致点击事件失效
      this.selectOpen = true
      this.$nextTick(() => {
        this.selectOpen = false
      })
    },
    chooseCompany2 () {
      console.log(this.selectValue)
      this.$refs.selectUserModal2.show()
    },
    changeT (value) {
      this.$emit('change', this.selectIds.join(','))
    },
    // 选择
    selectCompanyByOK (rowIds, rowLine) {
      this.$emit('change', rowIds.join(','))
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>
<style lang="less" scoped>
@width: 82px;

.left {
  width: calc(100% - @width - 8px);
}

.right {
  width: @width;
}

.full {
  width: 100%;
}
</style>
